 <template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearFix">
        <h2>法人代表信息</h2>
      </div>

      <div>
        <el-form ref="formData" :model="formData" label-width="200px">
          <el-form-item
            label="法人身份证号"
            prop="elpCcSn"
            :rules="[{required: true, message: '请输入法人身份证号', trigger: 'blur'},{validator: validatePass, trigger: 'blur'}]"
          >
            <el-input class="input-width" v-model="formData.elpCcSn" placeholder></el-input>
          </el-form-item>

          <el-form-item label="证件有效期">
            <el-date-picker
              v-show="!formData.elpCcIsPerpetual"
              v-model="formData.elpCcEndDate"
              type="datetime"
              placeholder="选择时间"
            ></el-date-picker>
            <el-switch v-model="formData.elpCcIsPerpetual" active-color="#13ce66"></el-switch>
            <span class="longTerm-style">长期</span>
          </el-form-item>

          <el-form-item label="法人身份证照片">
            <el-upload
              class="upload-demo upload-width"
              v-model="formData.elpCcImgFont"
              :action="uploadImageUrl"
              :on-preview="handlePreview"
              accept=".gif, .jpg, .jpeg, .bmp, .png"
              list-type="picture"
              :on-success="frontSuccess"
              :headers="token"
              :show-file-list="false"
            >
              <img
                v-if="formData.elpCcImgFont"
                :src="downImgHost + '/' + formData.elpCcImgFont"
                class="avatar upload-width"
              >
              <el-button size="small" class="add-style" type="primary">上传正面</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label>
            <el-upload
              class="upload-demo upload-width"
              v-model="formData.elpCcImgEnd"
              :action="uploadImageUrl"
              :on-preview="handlePreview"
              accept=".gif, .jpg, .jpeg, .bmp, .png"
              :on-success="endSuccess"
              list-type="picture"
              :headers="token"
              :show-file-list="false"
            >
              <img
                v-if="formData.elpCcImgEnd"
                :src="downImgHost + '/' + formData.elpCcImgEnd"
                class="avatar upload-width"
              >
              <el-button size="small" class="add-style" type="primary">上传背面</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <!-- <el-button @click="resetForm('formData')" class="widthBtn">重置</el-button> -->
            <el-button class="widthBtn  add-style" @click="submitForm" type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { uploadImageUrl, downImgHost } from "src/config/env";
import { setLegalPerson } from "api/profile";
import { getToken } from "src/util/auth";

export default {
  data() {
    let validatePass = (rule, value, callback) => {
      let reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
      if (!reg.test(value)) {
        callback(new Error("身份证号有误"));
      } else {
        callback();
      }
    };
    return {
      validatePass: validatePass,
      formData: {
        elpCcSn: "", //法人身份证号
        elpCcEndDate: "", //证件有效期
        elpCcIsPerpetual: false, // 证件有效期是否长期

        elpCcImgEnd: "", //身份证背面
        elpCcImgFont: "" //身份证正面
      },
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
      fileList1: [],
      fileList2: [],
      uploadImageUrl: uploadImageUrl,
      token: { Authorization: "" },
      downImgHost: downImgHost
    };
  },
  props: {
    enterpriceInfo: {
      type: Object,
      default() {
        return [];
      }
    }
  },
  watch: {
    enterpriceInfo: {
      handler: function(newVal, oldVal) {
        this.enterpriceInfo = newVal;
        this.dataInit();
      },
      deep: true
    }
  },
  components: {},
  mounted() {
    this.token.Authorization = getToken();
  },
  methods: {
    dataInit() {
      for (var i in this.formData) {
        for (var enterItem in this.enterpriceInfo) {
          if (i === enterItem) {
            this.formData[i] = this.enterpriceInfo[enterItem];
          }
        }
      }
    },
    frontSuccess(res, file) {
      this.formData.elpCcImgFont = res.data;
    },
    endSuccess(res, file) {
      this.formData.elpCcImgEnd = res.data;
    },
    handlePreview(file) {
    },
    submitForm() {
      setLegalPerson(this.formData).then(res => {
        this.$message.success("数据上传成功");
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}
.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}
</style>
